<template>
    <div>
        <path-tracking :path="path"/>        
        <div class="formLayout changeRadioStyle">
            <el-row class="rows basic">
                <el-col class="inputs">
                    <div class="input_can" style="margin-top: 10px;">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            创建人
                        </label>
                        <p style="font-size: 14px;">{{userName}}{{getJobNo()}}</p>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" style="margin-top: 10px;">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            创建来源
                        </label>
                        <p style="font-size: 14px;">CRM-手动创建</p>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" style="margin-top: 10px;">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            推广来源
                        </label>
                        <p style="font-size: 14px;">{{getDep()}}</p>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" ref="name">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            姓名
                        </label>
                        <el-input size="small" class="input-cont" v-model="name" placeholder="请输入姓名"></el-input>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" ref="phone">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            手机
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="phone" placeholder="请输入手机号码"></el-input>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" ref="password">
                        <label class="title_can">
                            <img class="required" src="@/assets/img/flower_red.png" alt="">
                            密码
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="password" placeholder="请输入密码"></el-input>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can" ref="email">
                        <label class="title_can">
                            邮箱
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="email" placeholder="请输入邮箱"></el-input>
                    </div>
                </el-col>
                 <el-col class="inputs">
                    <div class="input_can">
                        <label class="title_can">
                            计划购买时间
                        </label>
                        <el-select size="small" class="input-cont" placeholder="请选择内容" v-model="planBuyTime">
                            <el-option
                                v-for="item in planTimeArr"
                                :key="item.key"
                                :label="item.value" 
                                :value="item.key"
                            />
                        </el-select>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can">
                        <label class="title_can">
                            身份证
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="idCard"  placeholder="请输入身份证号"></el-input>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can">
                        <label class="title_can">
                            男士姓名
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="maleName" placeholder="请输入男士姓名"></el-input>
                    </div>
                </el-col>
                <el-col class="inputs">
                    <div class="input_can">
                        <label class="title_can">
                            女士姓名
                        </label>
                        <el-input size="small" class="input-cont" value="" v-model="femaleName" placeholder="请输入女士姓名"></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="inputs2">
                    <div class="input_can">
                        <label class="title_can">
                            我的生日
                        </label>
                        <el-radio-group class="radio_can" v-model="maleCalendarType">
                            <el-radio :label="1">公历</el-radio>
                            <el-radio :label="2">农历</el-radio>
                        </el-radio-group>
                        <el-date-picker
                            size="small"
                            v-model="maleBirthday"
                            type="date"
                            formate="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="inputs2">
                    <div class="input_can">
                        <label class="title_can">
                            伴侣生日
                        </label>
                        <el-radio-group class="radio_can" v-model="femaleCalendarType">
                            <el-radio :label="1">公历</el-radio>
                            <el-radio :label="2">农历</el-radio>
                        </el-radio-group>
                        <el-date-picker
                            size="small"
                            v-model="femaleBirthday"
                            type="date"
                            formate="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
             <el-row>
                <el-col class="inputs2">
                    <div class="input_can">
                        <label class="title_can">
                            结婚纪念日
                        </label>
                        <el-radio-group class="radio_can" v-model="weddingCalendarType">
                            <el-radio :label="1">公历</el-radio>
                            <el-radio :label="2">农历</el-radio>
                        </el-radio-group>
                        <el-date-picker
                            size="small"
                            v-model="weddingDay"
                            type="date"
                            formate="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
            <el-row class="rows basic">
                <el-col class="inputs">
                    <div class="input_can">
                        <label class="title_can">
                            联系地址
                        </label>
                        <el-cascader
                            class="input-cont"
                            :options="optionsStore"
                            @change="changeArea"
                            @active-item-change="handleItemChangeStore"
                            :props="locateProp"
                            placeholder="请选择区域"
                            :value="contactAddress"
                            size="small"
                        >
                        </el-cascader>
                    </div>
                </el-col>
                <el-col class="inputs" style="width: 50%;">
                    <div class="input_can">
                        <label class="title_can">详细地址</label>
                        <el-input size="small" class="input-cont" v-model="detailedAddress" placeholder="请输入详细地址" value=""></el-input>
                    </div>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col class="input_area" style="width: 75%;">
                    <div class="input_can">
                        <label class="title_can"></label>
                        <el-input size="small" class="input-cont area_select" v-model="detailedAddress" placeholder="请输入详细地址" value=""></el-input>
                    </div>
                </el-col>
            </el-row> -->
            <div class="formBtnList">
                <button class="sureBtn" @click="onSubmitData">确定</button>
                <button class="cancelBtn" @click="cancelBtn">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import pathTracking from '@/components/common/pathTracking'
//import verification from  '../../components/js/verification'
//import {regionData} from 'element-china-area-data' //省市区
import { objDeepCopy, DRcookie } from '@/assets/js/common.js'
import { getProvince, getCity, getDistrict, getPlanTime} from './axios'
import { setTimeout } from 'timers';
import datas from './datas.js'
export default {
    name:'createCustomer',
    components:{
        pathTracking
    },
    data(){
        return{
            path: ['CRM', '客户管理', {label: '客户列表', name: 'customerList'}, '创建客户'],
            name:null,
            password:'',
            phone:null,
            email:'',
            planBuyTime:'',
            idCard:'',
            maleName:'',
            femaleName:'',
            radio:'',
            maleBirthday:'',//我的生日
            maleCalendarType:'',
            femaleBirthday:'',//伴侣生日
            femaleCalendarType:'',
            partnerRadio:'',
            partnerBirthday:'',
            weddingCalendarType:'',
            weddingDay:'',
            detailedAddress:'',
            contactAddress: [],
            sourceList:datas.sourceList,
            value1:'',
            value2:'',
            value3:'',
            //options: regionData,
            planTimeArr: [],   //计划购买时间选项
            locateProp: {
                value: 'value',
                label: 'value',
                children: 'cities'
            },
            // 预约地址连级选择
            optionsStore: [],
            // 默认选择的地址(预约地址)
            orderArea: [],
        }
    },
    computed: {
        userName() {
            return DRcookie.get('userName')
        }
    },
    methods:{
        getJobNo() {
            let jobNo = DRcookie.get('jobNo')
            if(jobNo) {
                return `【${jobNo}】`
            }else {
                return ''
            }
        },
        getDep() {
            let department = DRcookie.get('department')
            if(department) {
                return `${department}`
            }else {
                return ''
            }
        },
        toJump(){
            this.$router.push({name:'customerList'})
        },
        toCancel(){
            this.$router.push({name:'customerList'})
        },
        
        handleChange(value) {
            //console.log('jdaljsl',value);
        },
        // 表单验证
        validateData() {
            let regExp = /^[ ]*$/
            let pass = true;
            if(this.name == null){
                this.name = ''
            }
            if(this.phone == null){
                this.phone = ''
            }
            if(this.password == null){
                this.password = ''
            }
            regExp.test(this.name) && (pass = false)
            regExp.test(this.phone) && (pass = false) 
            regExp.test(this.password) && (pass = false)

            regExp.test(this.name) ? this.$refs.name.classList.add('checkedRedInput') : this.$refs.name.classList.remove('checkedRedInput')
            regExp.test(this.phone) ? this.$refs.phone.classList.add('checkedRedInput') : this.$refs.phone.classList.remove('checkedRedInput')
            regExp.test(this.password) ? this.$refs.password.classList.add('checkedRedInput') : this.$refs.password.classList.remove('checkedRedInput')

            return pass
        },

        // handleItemChange(val){
        //     console.log('联系地址信息',val)
        // },
        // 预约地址选择市
        changeArea(e) {
            let province = this.optionsStore.find(ele => ele.provinceName === e[0])
            let city = province.cities.find(ele => ele.cityName === e[1])
            let str = '';
            // getShop(district.areaCode).then(res => {
            //     if(res.data.status === 200) {
            //         this.storeList = res.data.result
            //     }
            // })
            Array.isArray(e) && e.map((ele, index) => {
                str += (index < e.length - 1 ? `${ele}-` : ele)
            })
            this.address = str;
            this.$emit('changeShop', str)
        },
        // 预约地址省市选择
        handleItemChangeStore(item, reload) {
            let clue, index;
            this.optionsStore.map((ele, ind) => {
                if(ele.provinceName === item[0]) {
                    clue = ele.provinceCode
                    index = ind
                }
            })
            item.length === 1 && clue && getCity(clue).then(res => {
                if(res.status === 200) {
                    let temp = res.data.result
                    temp.forEach(ele => {
                        ele.value = ele.cityName
                        // ele.cities = []
                    })
                    this.optionsStore[index].cities = temp
                    reload && this.handleItemChangeStore(reload)
                }
            }).catch(err => {
                console.log('err: ', err)
            })
            // if(item.length === 2) {
            //     let indicator, cityCode, provinceCode = this.optionsStore[index].provinceCode;
            //     this.optionsStore[index].cities.map((ele, ind) => {
            //         if(ele.cityName === item[1]) {
            //             cityCode = ele.cityCode;
            //             indicator = ind
            //         }
            //     })
            //     getDistrict(provinceCode, cityCode).then(res => {
            //         if(res.status === 200) {
            //             let temp = res.data.result
            //             temp.forEach(ele => {
            //                 ele.value = ele.areaName
            //             })
            //             this.optionsStore[index].cities[indicator].cities = temp
            //         }
            //     })
            // }
        },
        
        onSubmitData(){
            if(!this.validateData()) {
                this.$message({
                    message: '内容不能为空',
                    type: 'warning'
                });
                return
            }
            var data = {
                source: 'CRM-手动创建',
                name:this.name,
                phone:this.phone,
                password:this.password,
                email:this.email,
                planBuyTime:this.planBuyTime,
                idCard:this.idCard,
                maleName:this.maleName,
                weddingCalendarType:this.weddingCalendarType,//1.公历 2.农历
                maleBirthday:this.maleBirthday,
                maleCalendarType:this.maleCalendarType,
                femaleBirthday:this.femaleBirthday,//伴侣生日
                femaleCalendarType:this.femaleCalendarType,
                weddingDay:this.weddingDay,//结婚纪念日 ,少了省市区，生日日期
                address:this.address,
                detailedAddress:this.detailedAddress, //详细地址
                femaleName:this.femaleName,
                promotionSource: this.getDep()      //推广来源
            }
            var that = this;
            //this.clearData();
            that.$ajax({
                method:"POST",
                url:api.crm + '/customerInfo',
                data:data
            }).then((res) => {
                var data = res.data;
                if(data.status == 200){
                    that.$message({
                        message: '创建成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.clearData()
                        that.$router.replace({name:'customerList'})
                    },2000)
                }else if(data.status == 500 && data.code == '1000050'){
                    that.$message({
                        message: data.msg,
                        type: 'warning'
                    }); 
                }else{
                    that.$message({
                        message: data.msg,
                        type: 'warning'
                    }); 
                }
            })
        },
        clearData(){
            this.name = '',
            this.phone = '',
            this.password = '',
            this.email = '',
            this.planBuyTime = '',
            this.idCard = '',
            this.maleName = '',
            this.weddingCalendarType = '',//1.公历 2.农历
            this.maleCalendarType ='',
            this.femaleCalendarType = '',
            this.maleBirthday = '',
            this.femaleBirthday = '',//伴侣生日
            this.weddingDay = '',//结婚纪念日
            this.address = '',
            this.contactAddress = [];
            this.orderArea = [];
            this.detailedAddress = '' //详细地址
        },
        cancelBtn(){
            this.clearData()
            this.$router.push({name:'customerList'})
        }
    },
    activated() {
        
    },
    mounted() {
        // 获取省
        getProvince().then(res => {
            if(res.data.status === 200) {
                let temp = res.data.result;
                temp.forEach(ele => {   
                    ele.value = ele.provinceName
                    ele.cities = []
                })
                this.optionsStore = temp
            }
        }).catch(err => {
            console.log('err: ', err)
        })
        getPlanTime().then(res => {
            if(res.status === 200) {
                this.planTimeArr = res.data.result
            }
        }).catch(err => {

        })
    }
}
</script>


<style>
@import '../../components/css/viewCommon.css';
.el-date-editor{
    /* margin-left: 10px */
}
.changeRadioStyle .el-radio+.el-radio{
    margin-left:0;
}
.el-radio-group{
    min-width: 110px;
}
.el-radio__label{
    padding-left: 4px
}

</style>

<style scoped>
.addressText{
    display: block;
    width: 66%;
    margin-left: 120px;
}
.formLayout{
    margin: 16px;
    background-color: #fff;
    height: 100%;
    overflow: auto;
    padding: 16px;
    border-radius: 8px;
}
.input-cont{
    flex: 1;
}
.inputs{
    width: 25%;
    height: 32px;
    margin-bottom: 16px;
    min-width: 26rem;
}
.inputs2{
    width: 35%;
    height: 32px;
    margin-bottom: 16px;
    min-width: 35rem;
}
.input_area{
    width: 50%;
    height: 32px;
    margin-bottom: 16px;
    min-width: 35rem;
}
.area_select{
    width: 25%;
    min-width: 35rem;
}
.input_can{
    width: 100%;
    display: flex;
	align-items: center;
}
.title_can{
    font-size: 14px;
    min-width: 100px;
    padding-right: 8px;
    text-align: right;
}
.title_can img{
    vertical-align:middle;
}
.radio_can{
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>


